<template>
  <div>
    <template v-for="(item, index) in data">
      <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
           情况一：有子集的情况：                         -->
      <el-submenu
        :key="index"
        :index="item.id"
        v-if="item.children && item.children.length > 0"
      >
        <template slot="title">
          <svg-icon :icon-class="item.icon" class="icon"></svg-icon>
          <span>{{ item.name }}</span>
        </template>
        <nav-menu :data="item.children"></nav-menu>
      </el-submenu>
      <!-- 情况二：没子集的情况： -->
      <el-menu-item
        :class="{
          active: $route.path.indexOf(item.path) != -1,
        }"
        :key="index"
        v-else
        :index="item.id"
        @click.native="activeMenu(item.path)"
      >
        <svg-icon :icon-class="item.icon" class="icon"></svg-icon>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  props: {
    data: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: [],
    },
  },
  methods: {
    activeMenu(path) {
      localStorage.removeItem("activeName");
      this.$router.push(`/app/${path}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.icon {
  font-size: 16px;
  margin-right: 8px;
  fill: currentColor;
  color: #909399;
}
:deep(.el-submenu__icon-arrow) {
  font-size: 24px;
}
:deep(.el-menu-item) {
  display: flex;
  align-items: center;
}
:deep(.el-submenu__title) {
  display: flex;
  align-items: center;
}
</style>
